<template>
  <!-- 回复评论
       1：导入api
       2:点击回复调用
       3：存储数据并渲染
       4：上拉加载
           van-list
              v-model
              finished
              finished-text
              @load
                  调用接口
                  调用完成
                      v-model值改成false
                      数据累加
                      下一页条件修改
                      判断是否加载 完成，完成finished=true
    -->
  <van-action-sheet v-model="show" title="发表回复" @closed="$emit('reload')">
    <div class="content">
      <div class="item">
        <img class="avatar" :src="item.aut_photo" alt="" />
        <div class="middle">
          <div class="name">{{ item.aut_name }}</div>
          <div class="txt">{{ item.content }}</div>
          <div class="time">
            <span class="t">{{ item.pubdate | formatDate }}</span>
            <span class="recomment">回复({{ item.reply_count }})</span>
          </div>
        </div>
      </div>
      <van-divider>回复列表</van-divider>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了!"
        @load="load"
      >
        <div class="item" v-for="i in list" :key="i.com_id">
          <img class="avatar" :src="i.aut_photo" alt="" />
          <div class="middle">
            <div class="name">{{ i.aut_name }}</div>
            <div class="txt">{{ i.content }}</div>
            <div class="time">
              <span class="t">{{ i.pubdate | formatDate }}</span>
              <span class="recomment">回复({{ i.reply_count }})</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="send">
      <van-field v-model.trim="msg" @keyup.enter="submit">
        <template #button>
          <van-button type="info" size="small" @click="submit">发布</van-button>
        </template>
      </van-field>
    </div>
  </van-action-sheet>
</template>
<script>
import { commentsPost, comments } from '@/api/article'
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      show: false,
      msg: '',
      list: [],
      loading: false,
      finished: false,
      offset: null
    }
  },
  methods: {
    async submit () {
      if (this.msg === '') {
        return this.$toast.fail('请先输入内容')
      }
      const res = await commentsPost({
        target: this.item.com_id,
        content: this.msg,
        art_id: this.$route.query.id
      })
      this.list.unshift(res.data.new_obj)
      this.msg = ''
      this.$toast.success('回复评论成功')
      //   this.item.reply_count++
      this.$emit('setCount')
      console.log('发表评论', res)
    },
    async load () {
      // 获取回复评论列表
      const res = await comments({
        type: 'c',
        source: this.item.com_id,
        offset: this.offset,
        limit: 1
      })
      this.loading = false
      this.list.push(...res.data.results)
      this.offset = res.data.last_id
      if (res.data.last_id === res.data.end_id) {
        this.finished = true
      }
      console.log('回复列表', res)
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  padding: 15px;
  .item {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #f4f4f4;
    .avatar {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      object-fit: cover;
    }
    .middle {
      flex: 1;
      margin: 0 15px;
      .name {
        color: #6e82a8;
        line-height: 20px;
      }
      .txt {
        padding: 10px 0;
        word-break: break-all;
        line-break: anywhere;
      }
      .time {
        .t {
          color: #b49f96;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
